<?php
/**
 * 评论展示组件
 * 支持两种样式：用户评价展示和文章评论区
 */
$configKey = isset($configKey) ? $configKey : 'comment';

// 页面文本配置
$texts = [
    'all_reviews' => '查看所有评价',
    'share_thoughts' => '分享您的想法...',
    'post_comment' => '发表评论',
    'more_comments' => '查看更多评论',
    'agree' => '赞同',
    'reply' => '回复',
    'author_reply' => '作者回复',
    'author' => '作者'
];

// 默认配置
$defaultConfig = [
    'section_id' => $configKey,
    'section_pretitle' => '用户评论',
    'section_title' => '用户评价展示',
    'section_subtitle' => '从创立至今，每一步都凝聚着团队的努力与客户的信任',
    'likes' => 4.7,
    'comments' => 42,
    'style' => 1,
    'texts' => $texts,
    'comment_list' => [
        [
            'user' => '林小雨',
            'avatar' => 'https://picsum.photos/seed/commenter1/100/100',
            'date' => '2023-11-16',
            'text' => '非常精彩的分析！我认为AI对工作方式的改变确实是全方位的，不仅影响了我们的工作内容，也改变了我们的工作环境和工作关系。未来的工作者确实需要培养更多AI难以替代的能力。',
            'likes' => 45,
            'has_author_reply' => true,
            'author' => [
                'name' => '科技观察员',
                'avatar' => 'https://picsum.photos/seed/author/100/100'
            ],
            'author_reply' => [
                'text' => '感谢您的赞同！您说得对，AI带来的变化是多维度的，我们需要从多个方面做好准备，才能在未来的职场中保持竞争力。',
                'date' => '2023-11-16'
            ]
        ],
        [
            'user' => '张文思',
            'avatar' => 'https://picsum.photos/seed/commenter2/100/100',
            'date' => '2023-11-15',
            'text' => '文章提到的人与AI协作的观点很有启发性。在我的工作中，我已经开始使用一些AI工具来辅助我的日常工作，确实提高了效率。但同时，我也意识到，如何有效地使用这些工具并发挥人类的独特优势，是一个需要不断学习的过程。',
            'likes' => 32,
            'author' => [
                'name' => '科技观察员',
                'avatar' => 'https://picsum.photos/seed/author/100/100'
            ],
            'has_author_reply' => false
        ],
        [
            'user' => '李明远',
            'avatar' => 'https://picsum.photos/seed/commenter3/100/100',
            'date' => '2023-11-14',
            'text' => '对于小型企业来说，如何平衡AI投入和实际收益是一个挑战。希望能看到更多关于中小企业AI应用的案例分析。',
            'likes' => 18,
            'has_author_reply' => true,
            'author' => [
                'name' => '科技观察员',
                'avatar' => 'https://picsum.photos/seed/author/100/100'
            ],
            'author_reply' => [
                'text' => '这是个很好的建议！我正在准备一系列关于中小企业AI应用的文章，将会在未来几周发布，敬请关注。',
                'date' => '2023-11-15'
            ]
        ]
    ]
];

// 获取传入配置
$customConfig = $pageConfig['components']['comment'] ?? [];

// 合并配置
$data = array_merge($defaultConfig, $customConfig);

// 获取评论样式参数，默认为1
$commentStyle = isset($data['style']) ? (int)$data['style'] : 1;
// 确保参数只能是1或2
if ($commentStyle < 1 || $commentStyle > 2) {
    $commentStyle = 1;
}
$bgClass = '';
?>
<section id="<?= htmlspecialchars($data['section_id']); ?>" class="py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <?php if ($commentStyle == 1): ?>
        <!-- 样式1: 用户评价展示 -->
        <div class="shadow-sm mb-12">
            <div class="mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-6xl mx-auto">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-10">
                    <h2 class="text-3xl font-bold text-dark">用户评价</h2>
                    <div class="flex items-center mt-4 md:mt-0">
                        <div class="star-likes flex text-2xl mr-3">
                            <?php for ($i = 1; $i <= 5; $i++): ?>
                                <i class="fa fa-star <?= $i <= $data['likes'] ? 'text-yellow-400' : 'text-gray-300'; ?>"></i>
                            <?php endfor; ?>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-dark"><?= htmlspecialchars($data['likes']); ?></div>
                            <div class="text-gray-500"><?= htmlspecialchars($data['comments']); ?> 条评价</div>
                        </div>
                    </div>
                </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <?php foreach ($data['comment_list'] as $review): ?>
                            <div class="bg-gray-50 rounded-xl p-6 game-card-hover">
                                <div class="flex items-center mb-4">
                                    <img 
                                        src="<?= htmlspecialchars($review['avatar']); ?>"
                                        alt="用户头像"
                                        class="w-12 h-12 rounded-full object-cover mr-4"
                                    >
                                    <div>
                                        <div class="font-medium text-dark"><?= htmlspecialchars($review['user']); ?></div>
                                        <div class="text-gray-500 text-sm"><?= htmlspecialchars($review['date']); ?></div>
                                    </div>
                                </div>
                                <div class="star-likes flex mb-3">
                                    <?php for ($i = 1; $i <= 5; $i++): ?>
                                        <i class="fa fa-star <?= $i <= $review['likes'] ? 'text-yellow-400' : 'text-gray-300'; ?>"></i>
                                    <?php endfor; ?>
                                </div>
                                <p class="text-gray-700 line-clamp-4"><?= htmlspecialchars($review['text']); ?></p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    
                    <div class="mt-8 text-center">
                        <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
                            <?= htmlspecialchars($data['texts']['all_reviews']); ?>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    <?php else: ?>
        <!-- 样式2: 文章评论区 -->
        <div class="shadow-sm mb-12">
            <div class="mx-auto px-4">
                <div class="mx-auto">
                    <h2 class="text-3xl font-bold mb-8 text-dark">评论 (<?= htmlspecialchars($data['comments']); ?>)</h2>
                    
                    <!-- 评论输入框 -->
                    <div class="bg-gray-50 rounded-xl p-6 mb-8">
                        <div class="flex gap-4">
                            <div class="w-12 h-12 rounded-full bg-gray-200 flex-shrink-0">
                                <i class="fa fa-user text-gray-400 flex items-center justify-center h-full"></i>
                            </div>
                            <div class="flex-grow">
                                <textarea 
                                placeholder="<?= htmlspecialchars($data['texts']['share_thoughts']); ?>"
                                class="w-full p-4 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-none transition-all"
                                rows="4"
                            ></textarea>
                            <div class="flex justify-end mt-4">
                                <button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    <?= htmlspecialchars($data['texts']['post_comment']); ?>
                                </button>
                            </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 精选评论 -->
                    <div class="space-y-6">
                        <?php foreach ($data['comment_list'] as $comment): ?>
                            <div class="border-b border-gray-100 pb-6">
                                <div class="flex gap-4 mb-4">
                                    <img 
                                        src="<?= htmlspecialchars($comment['avatar']); ?>"
                                        alt="评论用户头像"
                                        class="w-12 h-12 rounded-full object-cover flex-shrink-0"
                                    >
                                    <div>
                                        <div class="flex items-center gap-2 mb-1">
                                            <h4 class="font-medium"><?= htmlspecialchars($comment['user']); ?></h4>
                                            <?php if ($comment['has_author_reply']): ?>
                                                <span class="text-xs px-2 py-0.5 bg-gray-100 text-gray-600 rounded-full"><?= htmlspecialchars($data['texts']['author_reply']); ?></span>
                                            <?php endif; ?>
                                        </div>
                                        <div class="text-sm text-gray-500 mb-3"><?= htmlspecialchars($comment['date']); ?></div>
                                        <p class="text-gray-700 mb-3"><?= htmlspecialchars($comment['text']); ?></p>
                                        <div class="flex gap-4 text-sm">
                                            <button class="text-gray-500 hover:text-primary transition-colors">
                                                <i class="fa fa-thumbs-up mr-1"></i> <?= htmlspecialchars($data['texts']['agree']); ?> (<?= $comment['likes']; ?>)
                                            </button>
                                            <button class="text-gray-500 hover:text-primary transition-colors">
                                                <i class="fa fa-reply mr-1"></i> <?= htmlspecialchars($data['texts']['reply']); ?>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <?php if ($comment['has_author_reply']): ?>
                                    <div class="ml-16 bg-gray-50 rounded-lg p-4">
                                        <div class="flex gap-3 mb-2">
                                            <img 
                                                src="<?= htmlspecialchars($comment['author']['avatar']); ?>"
                                                alt="作者头像"
                                                class="w-10 h-10 rounded-full object-cover flex-shrink-0"
                                            >
                                            <div>
                                                <div class="flex items-center gap-2">
                                                    <h4 class="font-medium"><?= htmlspecialchars($comment['author']['name']); ?></h4>
                                                    <span class="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full"><?= htmlspecialchars($data['texts']['author']); ?></span>
                                                </div>
                                                <div class="text-sm text-gray-500"><?= htmlspecialchars($comment['author_reply']['date']); ?></div>
                                            </div>
                                        </div>
                                        <p class="text-gray-700"><?= htmlspecialchars($comment['author_reply']['text']); ?></p>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    
                    <div class="mt-8 text-center">
                        <button class="px-6 py-2 border border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 transition-colors">
                            <?= htmlspecialchars($data['texts']['more_comments']); ?>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>
    </div>
</section>